<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../public/css/common.css">
    <link rel="stylesheet" href="css/couponDetail.css">
    <link rel="stylesheet" href="../public/css/bootstrap.css">
    <link rel="stylesheet" href="../public/iconfont/iconfont.css">

    <title>优惠券详情页-立即兑换</title>
</head>
<body>
<!--共用头部 head-->
<template data-src="../public/layout/header.html"></template>
<!--共用头部 head end-->

<div class="rel">
    <img src="images/xiami-banner.jpg" width="100%">

</div>

<div class="page-width">

    <div>
        <p class="smallbanner"><span class="bannerL"></span>活动详情<span class="bannerR"></span></p>
        <div class="text_main exchange-text">
            <p class="coupon-name">YOTA健康餐15元优惠券</p>
            <p class="coupon-integral"><span class="integral-count">10元积分</span><span class="icon iconfont">&#xe6ec; 累计领取量：80</span>
            </p>
            <p class="acttime"><i style="font-size: 15px" class="iconfont">&#xe606; </i>活动时间</p>
            <p class="acttime-detailed"><span>2017-09-01 00:00:00</span> 至 <span>2017-09-30 23:59:59</span></p>
        </div>
        <div class="text_detail">
            <p class="detail_tit">1、福利内容：</p>
            <p class="detail_txt">YOTA健康餐15元优惠券</p>
            <p class="detail_txt">适用地区：北京</p>
            <p class="detail_tit">2、兑换流程：</p>
            <p class="detail_txt">1 )点击兑换用京豆兑换，并得到对应的唯一兑换码；</p>
            <p class="detail_txt">2 )兑换成功后，扫描下面二维码，或应用商店下载“YOTA”app，点击下方菜单“我的”-抵用券-输入兑换码，即可兑换</p>
            <p class="detail_tit">3、活动说明：</p>
            <p class="detail_txt">1 )每个京东用户活动期间仅可兑换1次；每个兑换码仅可使用1次；</p>
            <p class="detail_txt">2 )兑换码有效期：即日起至2017年12月1日</p>
            <p class="detail_txt">3 )兑换码不退、不换、不可兑现</p>
            <p class="detail_txt">4 )兑换期间出现的问题以及使用流程，可拨打客服热线400-888-9417( 9:00-18:00 )进行咨询；</p>
        </div>
        <a class="btn-next btn-exchange btn-hover" type="button">立即兑换</a>
    </div>
</div>


<!--弹窗-->
<div class="popup-bg first-step" style="display: none">
    <div class="layer-exchange">
        <p class="fr icon iconfont guanbi">&#xe63d;</p>
        <p class="coupon-name">YOTA健康15元优惠券</p>
        <p><span class="integral-count">10元积分</span><span class="icon iconfont">&#xe6ec;累计领取量：80</span></p>
        <div class="phone-check">
            <p class="phone-num"><i class="icon iconfont">&#xe66b;</i>
                <input type="text" placeholder="请输入您的手机号码">
            </p>
            <p class="verification-num">
                <input type="text" placeholder="请输入验证码">
                <a class="send1 fr" onclick="sends.send();">发送验证码</a>
            </p>
        </div>
        <a class="btn-sure btn-exchange">确认</a>
    </div>
</div>
<div class="popup-bg second-step" style="display: none">
    <div class="sure-exchange sure-shape">
        <p class="exchange-integration"><i class="icon iconfont">&#xe667;</i>您将支付5积分进行兑换确定兑换？</p>
        <div class="rel">
            <img src="images/exchange-img.png" alt="">
            <div class="ab">
                <p>￥<span>5</span></p>
                <p>[满99可用]</p>
                <p>[购物商城]哈尔滨旗航店</p>
            </div>
        </div>
        <div class="layerBtn clearfix">
            <a class="js-sure">确定兑换</a>
            <a class="js-cancle">取 消</a>
        </div>
    </div>
</div>
<div class="popup-bg third-step" style="display: none">
    <div class="sure-used sure-shape">
        <p class="exchange-integration"><i class="icon iconfont">&#xe667;</i>您将支付5积分进行兑换确定兑换？</p>
        <div class="rel">
            <img src="images/exchange-img.png" alt="">
            <div class="ab">
                <p>￥<span>5</span></p>
                <p>[满99可用]</p>
                <p>[购物商城]哈尔滨旗航店</p>
            </div>
        </div>
        <div class="layerBtn clearfix">
            <a class="js-used">立即使用</a>
            <a class="js-cancle">取 消</a>
        </div>
    </div>
</div>
<div style="display: none" class="receive-popup">
    <div class="popup-logo">
        <i class="iconfont">&#xe667;</i>
    </div>
    <div class="popup-top"><p>恭喜你， 领取成功！</p></div>
    <div class="popup-bot"><p>感谢您的参与.&nbsp;&nbsp;祝您购物愉快</p></div>
    <div class="popup-btns">
        <div class="btns-wrapper">
            <a class="btns-left" href="javascript:void(0);">立即使用</a>
            <a class="btns-right js-close" href="javascript:void(0);">关闭</a>
        </div>
    </div>
</div>


<!--页脚 footer-->
<template data-src="../public/layout/footer.html"></template>
<!--页脚 footer end-->
<script type="text/javascript" src="../public/jquery/jquery.min.js"></script>
<script type="text/javascript" src="../public/js/common.js"></script>
<script src="../public/js/bootstrap.js"></script>
<script src="js/couponDetail.js"></script>
<script type="text/javascript" src="../public/js/template.js"></script>

<script>
    foo.onload = function (w, l) {
        console.log('可以在此处回调，w指window，l指loadJs')
    };
    foo.start();

    var sends = {
        checked:1,
        send:function(){
            var numbers = /^1\d{10}$/;
            var val = $('.phone-num input').val().replace(/\s+/g,""); //获取输入手机号码
            if(numbers.test(val)){
                var time = 60;
                function timeCountDown(){
                    if(time==0){
                        clearInterval(timer);
                        $('.verification-num a').addClass('send1').removeClass('send0').html("发送验证码");
                        sends.checked = 1;
                        return true;
                    }
                    $('.verification-num a').html(time+"s倒计时");
                    time--;
                    return false;
                    sends.checked = 0;
                }
                $('.verification-num a').addClass('send0').removeClass('send1');
                timeCountDown();
                var timer = setInterval(timeCountDown,1000);
            }
        }
    }

</script>


</body>
</html>